<template>
    <div>
        <!-- 头部组件 -->
        <HomeHeader />
        <van-tabs v-model="activeCategoryIndex">
            <van-tab
                :title="category.name"
                v-for="category in categoryList"
                :key="category.id"
            >
                <van-list
                    @load="loadMore"
                    :immediate-check="false"
                    v-model="category.loading"
                    :finished="category.finished"
                    finished-text="我是有底线的"
                >
                    <PostItem
                        :postData="post"
                        v-for="post in category.postList"
                        :key="post.id"
                    />
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import HomeHeader from "../components/HomeHeader";
    import PostItem from "../components/PostItem";
    export default {
        components: {
            HomeHeader,
            PostItem,
        },
        computed: {
            currentCategory() {
                return this.categoryList[this.activeCategoryIndex];
            },
        },
        data() {
            return {
                activeCategoryIndex: 0,
                categoryList: [],
            };
        },
        watch: {
            activeCategoryIndex(newVal) {
                // 由于在分类最后添加了一个加号
                // 所以如果点击的是最后一个索引, 就需要跳转页面
                if (newVal == this.categoryList.length - 1) {
                    this.$router.push("/manage");
                } else {
                    if (this.currentCategory.postList.length == 0) {
                        this.loadPost();
                    }
                }
            },
        },
        created() {
            if (localStorage.getItem("activeList")) {
                // 如果本地储存有数据, 就在本地储存获取,
                // 但是为了和之后的逻辑对接, 还是将数据构造成 res.data.data
                const res = {
                    data: {
                        data: JSON.parse(localStorage.getItem("activeList")),
                    },
                };

                this.categoryList = res.data.data.map((item) => {
                    return {
                        ...item,
                        postList: [],
                        pageIndex: 1,
                        pageSize: 6,
                        loading: false,
                        finished: false,
                    };
                });

                this.categoryList.push({
                    name: "+",
                });

                console.log(this.categoryList);

                this.loadPost();
            } else {
                this.$axios({
                    url: "/category",
                }).then((res) => {
                    this.categoryList = res.data.data.map((item) => {
                        return {
                            ...item,
                            postList: [],
                            pageIndex: 1,
                            pageSize: 6,
                            loading: false,
                            finished: false,
                        };
                    });

                    this.categoryList.push({
                        name: "+",
                    });

                    console.log(this.categoryList);

                    this.loadPost();
                });
            }
        },
        methods: {
            loadMore() {
                // 这里是列表拉倒最底部会触发的函数
                // 将当前分类的页码加一然后获取数据
                this.currentCategory.pageIndex += 1;
                this.loadPost();
            },
            loadPost() {
                this.$axios({
                    url: "/post",
                    params: {
                        // 根据当前激活分类的 id
                        // 获取该分类的文章列表
                        // 结果类似于
                        // [
                        //     {title:'建国同志早上好'},
                        //     {title:'今天风儿很喧嚣'}
                        // ]
                        category: this.currentCategory.id,
                        pageSize: this.currentCategory.pageSize,
                        pageIndex: this.currentCategory.pageIndex,
                    },
                }).then((res) => {
                    console.log(res.data);
                    // 因为要分页所做的修改
                    // 1. 获取的数据不应该覆盖, 而是拼接
                    // this.currentCategory.postList = res.data.data
                    this.currentCategory.postList = [
                        ...this.currentCategory.postList,
                        ...res.data.data,
                    ];

                    // 2. 将加载状态变为 false
                    this.currentCategory.loading = false;

                    // 3. 如果服务器已经没有数据, 就应该将 finished 变为 true
                    if (res.data.data.length < this.currentCategory.pageSize) {
                        this.currentCategory.finished = true;
                    }
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    /deep/ .van-tab:nth-last-child(2) {
        background: #fff;
        position: sticky;
        right: -8px;
        width: 44px;
        line-height: 44px;
    }
</style>